<template>

  <div>
    <el-row :gutter="20" >
      <el-col :span="12">
        <el-card>
          <div class="stat-t-line">
            <span>题型分析</span>
            <el-radio-group v-model="typeChartType" size="mini">
              <el-radio-button label="饼图" />
              <el-radio-button label="柱状图"/>
              <el-radio-button label="条形图"/>
            </el-radio-group>
          </div>

          <stat-pie-chart v-if="!typeChartType || typeChartType==='饼图'" :data-list="typeStatList" title-field="title" value-field="quCount" chart-key="qu_type_analysis" />
          <stat-bar-chart v-if="typeChartType==='柱状图'" :data-list="typeStatList" title-field="title" value-field="quCount" chart-key="qu_type_analysis" />
          <stat-bar-y-chart v-if="typeChartType==='条形图'" :data-list="typeStatList" title-field="title" value-field="quCount" chart-key="qu_type_analysis"/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="stat-t-line">
            <span>难易度分析</span>
            <el-radio-group v-model="levelChartType" size="mini">
              <el-radio-button label="饼图" />
              <el-radio-button label="柱状图"/>
              <el-radio-button label="条形图"/>
            </el-radio-group>

          </div>

          <stat-pie-chart v-if="!levelChartType || levelChartType==='饼图'" :data-list="levelStatList" title-field="title" value-field="quCount" chart-key="qu_level_analysis"/>
          <stat-bar-chart v-if="levelChartType==='柱状图'" :data-list="levelStatList" title-field="title" value-field="quCount" chart-key="qu_level_analysis"/>
          <stat-bar-y-chart v-if="levelChartType==='条形图'" :data-list="levelStatList" title-field="title" value-field="quCount" chart-key="qu_level_analysis"/>
        </el-card>
      </el-col>

    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="24">
        <el-card>
          <div class="stat-t-line">
            <div>知识点分布统计</div>
            <div style="font-size: 12px">
              <tool-tip msg="统计仅用于分析知识点的分布比例情况，由于每道题可以包含多个知识点，题目数量可能存在重合，不能作为参考依据！" />
            </div>
          </div>
          <stat-key-points-tree-map :data-list="kpStatList" chart-key="qu_key_points_analysis" />
        </el-card>
      </el-col>
    </el-row>

  </div>

</template>

<script>
import { statQuType, statQuLevel, statKeyPoints } from '@/api/repo/stat'
import StatPieChart from '@/components/StatPieChart/index.vue'
import StatLineChart from '@/components/StatLineChart/index.vue'
import StatBarChart from '@/components/StatBarChart/index.vue'
import StatBarYChart from '@/components/StatBarYChart/index.vue'
import StatKeyPointsTreeMap from '@/views/admin/repo/stat/components/StatKeyPointsTreeMap/index.vue'

export default {
  components: { StatKeyPointsTreeMap, StatBarYChart, StatBarChart, StatLineChart, StatPieChart },
  data() {
    return {
      repoId: '',
      typeStatList: [],
      typeChartType: '饼图',
      levelStatList: [],
      levelChartType: '饼图',
      kpStatList: []
    }
  },

  created() {
    this.repoId = this.$route.query.repoId

    this.fetchData()
  },

  methods: {

    // 导出数据
    fetchData() {
      statQuType(this.repoId).then(res => {
        this.typeStatList = res.data
      })

      statQuLevel(this.repoId).then(res => {
        this.levelStatList = res.data
      })

      statKeyPoints(this.repoId).then(res => {
        this.kpStatList = res.data
      })
    }
  }
}
</script>

<style scoped>
.stat-t-line{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
}
</style>

